<template>
    <fieldset>
        <legend>{{ $store.state.product.name }}</legend>
        <ul>
            <li v-for="item in productData" :key="item.id">
                <b>
                    产品名称：{{ item.title }}
                </b>
                ———————
                <b>
                    产品价格：{{ item.price }}
                </b>
                ———————
                <b>
                    产品库存：{{ item.inventory }}
                </b>
                <button @click="addCart(item)" :disabled="item.inventory===0">加入购物车</button>
            </li>
        </ul>
    </fieldset>
</template>
<script>
import { mapActions, mapState,} from "vuex"

export default {
    computed: {
        ...mapState('product', ['productData'])
    },
    mounted(){
        //这里是触发actions 
        this.FETCH_PRODUCT()
    },
    methods: {
        addCart(item){
            this.ADD_TO_CART(item)
        },
        ...mapActions('product', ['FETCH_PRODUCT']),
        ...mapActions('cart', ['ADD_TO_CART']),
        // getProduct() { }
    },


}

</script>